<template>


    <div class="content-hd">

        <div class="inp">
            <el-date-picker
                    v-model="time"
                    type="daterange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="至"
                    @clear="handleClear"
            />
        </div>
        <div class="btn">
            <el-button type="primary" @click="getOrderList">查询</el-button>
        </div>
    </div>

    <div class="content-sub">
        <ul>
            <li :class="{active: activeIndex===1}" @click="activeIndex=1 ;status=1;getOrderList() "> 未支付</li>
            <li :class="{active: activeIndex===2}" @click="activeIndex=2 ;status=2;getOrderList() "> 已支付</li>
            <li :class="{active: activeIndex===3}" @click="activeIndex=3;status=3;getOrderList()  "> 已取消</li>
            <li :class="{active: activeIndex===4}" @click="activeIndex=4;status=4;getOrderList()  "> 已退款</li>
            <li :class="{active: activeIndex===5}" @click="activeIndex=5;status=5;getOrderList()  "> 已完成</li>
        </ul>

        <el-table
                :data="orderList"
                style="width: 100%">
            <el-table-column
                    align="center"
                    prop="orderNo"
                    label="编号">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="userName"
                    label="用户名" >
            </el-table-column>

            <el-table-column
                    align="center"
                    prop="courseName"
                    label="课程名" >
            </el-table-column>

            <el-table-column
                    align="center"
                    prop="listed"
                    label="课程状态" >
            </el-table-column>



            <el-table-column
                    align="center"
                    prop="price"
                    label="价格" >
            </el-table-column>


            <el-table-column
                    align="center"
                    prop="s"
                    label="订单状态"
            >
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="OrderDate"
                    label="下单时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    v-if="status===2"
                    prop="payDate"
                    label="支付时间">
            </el-table-column>

            <el-table-column
                    align="center"
                    v-if="status===2"
                    prop="payNo"
                    label="支付编号">
            </el-table-column>


            <el-table-column
                    align="center"
                    v-if="status===3"
                    prop="cancelTime"
                    label="取消时间">
            </el-table-column>


            <el-table-column   align="center" label="操作" width="200" v-if="status ===1 ||  status===2   ">


                <template #default="{ row }">

                    <el-button v-if="row.status===1" plain type="primary" @click="cancel(row)">取消订单
                    </el-button>

                    <el-button v-if="row.status===1" plain type="success" @click="payOrder(row)">支付订单
                    </el-button>

                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据"/>
            </template>


        </el-table>

        <el-pagination class="fenye"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       v-model:current-page="pageNum"
                       v-model:page-size="pageSize"
                       :page-sizes="[2, 4, 6, 8]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="tt">
        </el-pagination>

    </div>


</template>

<script setup>

    import {ref, reactive, onMounted} from "vue"
    import {Edit, Delete} from '@element-plus/icons-vue'
    import {ElMessage} from 'element-plus';
    import {useRouter} from 'vue-router'
    import {useUserStore} from '@/stores/user.js'

    const userStore = useUserStore()
    import axios from 'axios'

    const router = useRouter()
    const pageNum = ref(1)
    const pageSize = ref(2)
    const status = ref(1)
    const time = ref([null, null])
    const orderList = ref([])
    const tt = ref(0)
    onMounted(() => {
        getOrderList()
    })

    const activeIndex = ref(1)


    const getOrderList = async () => {

        if (time.value === null) time.value = [null, null]
        const res = await axios.get('orders/list?pageNum=' + pageNum.value + '&pageSize=' + pageSize.value + '&status=' + status.value + '&startTime=' + time.value[0] + '&endTime=' + time.value[1] )
        orderList.value = res.data.items
        tt.value = res.data.total
        orderList.value.forEach(function (item) {
            if (item.status === 1) item.s = '未支付'
            if (item.status === 2) item.s = '已支付'
            if (item.status === 3) item.s = '已取消'
            if (item.status === 4) item.s = '已退款'
            if (item.status === 5) item.s = '已完成'


        })


    }


    const handleSizeChange = (ps) => {
        pageSize.value = ps
        getOrderList()
    }


    const handleCurrentChange = (num) => {
        pageNum.value = num
        getOrderList()

    }




    const cancel = async (row) => {

        await ElMessageBox.confirm('你确认要取消该订单么', '温馨提示', {
            type: 'warning',
            confirmButtonText: '确认',
            cancelButtonText: '取消'
        })



        const res = await axios.get('/orders/cancel?id=' + row.id)


        if (res.data.data === '取消成功') {
            ElMessage.success('取消成功')
            getOrderList()

            return
        }
        ElMessage.error(res.data.data)
    }


     const  payOrder=(item)=>{
         router.push('/pay?price='+item.price+'&orderNo='+item.orderNo )

     }


</script>

<style scoped lang="scss">


    ul {
        li {
            list-style-type: none;
        }
    }


    .content-hd {
        margin-top: 15px;
        margin-left: 30%;
        display: flex;
        justify-content: left;

        .btn{
            margin-left: 15px;
        }

    }


    .content-sub {

        margin-top: 30px;

        ul {
            display: flex;
            margin-bottom: 30px;

            li {
                background-color: #fff;
                width: 90px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                border-right: 1px solid #e9ebee;
                font-size: 14px;
                color: #93939e;
                cursor: pointer;

            }

            .active {
                color: white;
                background-color: #375EDC;
            }

        }
    }


    .title {
        font-size: 18px;
    }

    .el-button {
        width: 60px;
    }

    .photoList {
        margin-top: 20px;
        font-size: 18px;
        color: black;

    }


    .fenye {
        margin-top: 30px;
        margin-left: 33%;
    }


</style>
